import Cookie from 'js-cookie'

export default {
    state: {
        isCollapsed: false,
        tabList: [
            {
                path: '/',
                name: 'home',
                label: '首页',
                icon: 'home'
            }
        ],
        currentMenu: null,
        // 导航菜单,不同角色菜单不同
        // 登录时通过用户名获取角色，通过角色获取导航菜单和token，并存储到缓存中，该用户处于登录状态时，导航菜单是全局通用的
        menu: []
    },
    mutations: {
        collapseMenu(state) {
            state.isCollapsed = !state.isCollapsed
        },
        selectMenu(state, val) {
            console.log(val)
            if (val.name !== 'home') {
                state.currentMenu = val
                // 在tabList中查找，是否有val标签
                const result = state.tabList.findIndex(item => item.name === val.name)
                if (result === -1) {
                    // 如果标签列表(tabList)中没有val标签，则添加
                    state.tabList.push(val)
                }
            } else {
                // 如果选中的菜单是首页
                state.currentMenu = null
            }
        },
        closeTag(state, val) {
            const index = state.tabList.findIndex(item => item.name === val.name)
            if (index !== -1) {
                console.log('closeTag: ' + index)
                state.tabList.splice(index, 1)
            }
        },
        clearTag(state) {
            state.tabList = [{ path: '/', name: 'home', label: '首页', icon: 'home' }]
        },
        setMenu(state, val) {
            state.menu = val
            // 将该用户对应角色的菜单存入缓存
            Cookie.set('menu', JSON.stringify(val));

        },
        clearMenu(state) {
            state.menu = [];
            Cookie.remove('menu');
        },
        addMenu(state, router) {
            if (!Cookie.get('menu')) {
                // 如果缓存中的menu不存在
                return;
            }
            const list = JSON.parse(Cookie.get('menu'));

            state.menu = list;
            const menuArray = [];
            list.forEach(item => {
                if (item.children) {
                    // 有子菜单
                    item.children = item.children.map(child => {
                        const sep = child.url[0] === '/' ? '' : '/'
                        child.component = () => import(`../views${sep + child.url}`);
                        return child;
                    })
                    menuArray.push(...item.children);
                } else {
                    // 没有子菜单
                    const sep = item.url[0] === '/' ? '' : '/'
                    item.component = () => import(`../views${sep + item.url}`);
                    menuArray.push(item);
                }
            });
            // 路由的动态添加
            menuArray.forEach(item => {
                router.addRoute('Main', item);
            })
        }
    }
}